<script setup>
import { ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API
import { getCategoryAPI } from '@/api/home.js'
//引入子组件
import ItemVue from './Item.vue'
//请求数据初始化页面
const categoryList = ref([])
const getCategory = async () => {
  const res = await getCategoryAPI()
  categoryList.value = res.result
}
onLoad(async () => {
  await getCategory()
})
</script>

<template>
  <view class="category-panel">
    <ItemVue v-for="(item, index) in categoryList" :item="item" :key="index" />
  </view>
</template>

<style lang="scss">
.category-panel {
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx;

  > * {
    width: 20%;
    box-sizing: border-box;
    padding: 10rpx;
  }
}
</style>
